<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper 
      class="custom-swiper" 
      :indicator-dots="false" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      circular
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index" >
        <image 
          :src="item.url" 
          mode="aspectFill" 
          class="swiper-image"
        ></image>
      </swiper-item>
    </swiper>

    <!-- 限时免费区域 -->
    <view class="time-free-section">
      <view class="section-header">
        <text class="section-title">限时免费</text>
        <view class="countdown">
          <span class="time-unit" v-for="(unit, index) in timeUnits" :key="index">
            <span class="digit">{{ unit.value }}</span>
            <span class="colon" v-if="!isLastUnit(index)">:</span>
          </span>
        </view>
        <!-- 占位 -->
        <view class=""></view>
      </view>

      <view class="novel-grid">
        <view class="novel-item" v-for="(novel, index) in novelList" :key="index" @click="goRead(novel.novelId)">
          <view class="cover-container">
            <image 
              :src="novel.image" 
              mode="aspectFill" 
              class="novel-cover"
            ></image>
            <view class="free-tag">
              <text>免费</text>
            </view>
          </view>
          <text class="novel-title">{{ novel.novelName }}</text>
        </view>
      </view>
    </view>

    <!-- 新书精选区域 -->
    <view class="new-books-section">
      <view class="section-header">
        <text class="section-title">新书精选</text>
        <text class="more-btn">更多 ></text>
      </view>

      <view class="book-list">
        <view class="book-item" v-for="(book, index) in bookList" :key="index" @click="goRead(book.novelId)">
          <image 
            :src="book.image" 
            mode="aspectFill" 
            class="book-cover"
          ></image>
          <view class="book-info">
            <text class="book-title">{{ book.novelName }}</text>
            <text class="book-meta">{{ book.author }} · {{ book.name }} · 连载 · {{ book.count / 10000 }}万字</text>
            <text class="book-desc">{{ book.des}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ApiGetFreeNovels, ApiGetNewNovel } from "../api/novel.js";

// 轮播图数据
const swiperList = ref([
  { url: '/static/test/b.jpg' },
  { url: '/static/test/b.jpg' },
  { url: '/static/test/b.jpg' }
]);

// 限时免费倒计时
const endTime = ref(24 * 60 * 60 * 1000 + new Date().getTime());
const timer = ref(null);
const timeUnits = ref([
  { value: '00', label: '时' },
  { value: '00', label: '分' },
  { value: '00', label: '秒' }
]);

// 格式化数字为两位数
const formatNumber = (num) => {
  return num.toString().padStart(2, '0');
};

const updateCountdown = () => {
  const now = new Date().getTime();
  const diff = endTime.value - now;
  
  // 倒计时结束处理
  if (diff <= 0) {
    timeUnits.value = [
      { value: '00', label: '时' },
      { value: '00', label: '分' },
      { value: '00', label: '秒' }
    ];
    clearInterval(timer.value);
    return;
  }
  
  // 计算剩余时间
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  
  // 更新时间显示（已格式化）
  timeUnits.value = [
    { value: formatNumber(hours), label: '时' },
    { value: formatNumber(minutes), label: '分' },
    { value: formatNumber(seconds), label: '秒' }
  ];
};

const isLastUnit = (index) => index === timeUnits.value.length - 1;

onMounted(() => {
  // 获取限时免费小说
  getFree();
  // 获取最新的小说
  getNewNovels();
  // 初始化倒计时
  updateCountdown();
  timer.value = setInterval(updateCountdown, 1000);
});

onUnmounted(() => {
  clearInterval(timer.value);
});

// 限时免费小说数据
const novelList = ref([]);
const getFree = async () => {
  let res = await ApiGetFreeNovels();
  novelList.value = res;
};

// 新书精选数据
const bookList = ref([]);
// 获取最新的小说
const getNewNovels = async () => {
  let res = await ApiGetNewNovel();
  bookList.value = res;
};

// 跳转到阅读页面
const goRead = (val) => {
  uni.navigateTo({
    url: `/pages/novel/bookCover?bookId=` + val
  });
};
</script>

<style lang="less" scoped>
.container {
  padding: 20rpx;
}

/* 轮播图样式 */
.custom-swiper {
  width: 100%;
  height: 240rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 限时免费区域 */
.time-free-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .countdown {
      display: flex;
      align-items: center;
      
      .time-unit {
        display: flex;
        align-items: center;
        
        .digit {
          background: #FF4544;
          color: white;
          font-size: 32rpx;
          font-weight: bold;
          padding: 6rpx 12rpx;
          border-radius: 6rpx;
          box-shadow: 0 2rpx 4rpx rgba(255, 69, 68, 0.3);
          min-width: 48rpx;
          text-align: center;
        }
        
        .colon {
          font-size: 32rpx;
          font-weight: bold;
          color: #FF4544;
          margin: 0 8rpx;
        }
      }
    }
    
  }
  
  .novel-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .novel-item {
      width: 23%;
      margin-bottom: 20rpx;
      
      .cover-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 140%;
        border-radius: 12rpx;
        overflow: hidden;
        
        .novel-cover {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        
        .free-tag {
          position: absolute;
          top: 6rpx;
          left: 6rpx;
          background: linear-gradient(135deg, rgba(255, 69, 68, 0.9) 0%, rgba(255, 107, 107, 0.9) 100%);
          color: white;
          font-size: 20rpx;
          font-weight: 500;
          padding: 3rpx 8rpx;
          border-radius: 6rpx;
          box-shadow: 0 2rpx 4rpx rgba(255, 69, 68, 0.25);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: 6rpx;
            pointer-events: none;
          }
        }
      }
      
      .novel-title {
        display: block;
        font-size: 26rpx;
        margin-top: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

/* 新书精选区域 */
.new-books-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more-btn {
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .book-list {
    .book-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .book-cover {
        width: 150rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .book-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .book-title {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .book-meta {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .book-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 36rpx;
          
          /* 两行溢出隐藏 */
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
